/**
 * Created by ren on 06/04/2017.
 */
import React, {Component} from 'react'
import {Platform, Dimensions, TouchableWithoutFeedback, StatusBar} from 'react-native'
import {Header, Content, Text, List, ListItem, Right, Left, View, Icon, Button, Body, Title} from 'native-base'
import {getSize} from '../utils/response'
import {SmoothLine} from 'react-native-pathjs-charts'
import * as api from '../utils/api'
import * as NetService from '../utils/netservice'
import PageUtil from '../utils/PageUtil';
import VFooter from '../components/Footer'
var {height, width} = Dimensions.get('window');
import NotAccount from './account/NotAccount'
import AccountEnd from './account/AccountEnd'
let timer1 = ''
export default class Account extends Component {
  constructor(props) {
    super(props);
    this.PageUtil = new PageUtil();
    // 初始状态
    this.state = {
      data: [],
      allBalanceSum: 0,
      yesterdayBalanceSum: 0,
      forBalanceSum: 0,
      smoothLine: <View/>,
      options: {
        width: width - 50,
        height: 250,
        color: '#B5F7FF',
        margin: {
          top: 10,
          left: 35,
          bottom: 30,
          right: 10
        },
        animate: {
          type: 'delayed',
          duration: 200
        },
        axisX: {
          showAxis: false,
          showLines: false,
          showLabels: true,
          showTicks: false,
          zeroAxis: false,
          orient: 'bottom',
          tickValues: [],
          label: {
            fontFamily: 'Arial',
            fontSize: 7,
            fontWeight: true,
            fill: '#34495E'
          }
        },
        axisY: {
          showAxis: false,
          showLines: true,
          showLabels: true,
          showTicks: false,
          zeroAxis: false,
          orient: 'left',
          tickValues: [],
          label: {
            fontFamily: 'Arial',
            fontSize: 7,
            fontWeight: true,
            fill: '#6E6E6E'
          }
        }
      }
    };
  }

  getBalanceInfo() {
    NetService.get(api.getBalanceInfo)
      .then((response) => {
        var data = response.chartData.filter((item, index) => {
          this.state.options.axisX.tickValues.push({
            value: item.TransferTime
          })
          return item['index'] = index
        })
        let headerData = response.headerData
        this.setState({
          data: [data],
          allBalanceSum: headerData ? headerData.allBalanceSum ? headerData.allBalanceSum : 0 : 0,
          yesterdayBalanceSum: headerData ? headerData.yesterdayBalanceSum ? headerData.yesterdayBalanceSum : 0 : 0,
          forBalanceSum: headerData ? headerData.forBalanceSum ? headerData.forBalanceSum : 0 : 0,
          smoothLine: <SmoothLine data={this.state.data} options={this.state.options} xKey='index' yKey='sumAmount'/>
        })
        /*timer1 = setTimeout(() => {
         this.setState({
         smoothLine: <SmoothLine data={this.state.data} options={this.state.options} xKey='index' yKey='sumAmount'/>
         })
         }, 100)*/
      })
  }

  /*componentWillUnmount() {
   clearTimeout(timer1)
   }*/

  componentDidMount() {
    this.getBalanceInfo()
  }

  toNotAccount() {
    this.PageUtil.jumpPageWithComponent(NotAccount)
  }

  toAccountEnd() {
    this.PageUtil.jumpPageWithComponent(AccountEnd)
  }

  render() {
    return (
      <View style={{flex:1}}>
        <Header iosBarStyle="light-content" backgroundColor="#FF562F"
                style={{backgroundColor:'#FF562F',height:Platform.OS==='ios'?getSize(64):getSize(50),borderBottomWidth:0}}>
          <StatusBar
            backgroundColor={'#303135'}
          />
          <Body style={{alignItems:'center'}}>
          <Title style={{color:'white',fontSize:getSize(19)}}>结算中心</Title>
          </Body>
        </Header>
        <Content>
          <View style={{height:getSize(162),backgroundColor:'#FF562F',alignItems:'center',justifyContent:'center'}}>
            <View>
              <Text
                style={{fontSize:getSize(60),color:'white',textAlign:'center'}}>{this.state.yesterdayBalanceSum}</Text>
              <Text style={{fontSize:getSize(11),color:'white',textAlign:'center'}}>昨日结算（元）</Text>
            </View>
          </View>
          <View
            style={{flexDirection:'row',backgroundColor:'#FF491F',height:getSize(78),alignItems:'center',marginTop:getSize(-1)}}>
            <View style={styles.aView}>
              <Text style={styles.aView_Label}>待结算（元）</Text>
              <Text style={styles.aView_Text}>{this.state.forBalanceSum}</Text>
            </View>
            <View style={styles.aView1}>
              <Text style={styles.aView_Label}>总结算（元）</Text>
              <Text style={styles.aView_Text}>{this.state.allBalanceSum}</Text>
            </View>
          </View>
          {/* <View style={{backgroundColor:'white',marginTop:getSize(9)}}>
           <Text
           style={{color:'#BFBFBF',fontSize:getSize(11),marginLeft:getSize(12),marginTop:getSize(7)}}>七日结算额统计</Text>
           {this.state.smoothLine}
           </View>*/}
          <List style={{backgroundColor:'white',marginTop:getSize(10),marginBottom:getSize(10)}}>
            <TouchableWithoutFeedback onPress={()=>this.toNotAccount()}>
              <ListItem style={{marginRight:getSize(15),paddingRight:0}}>
                <Left>
                  <Text style={{fontSize:getSize(17),color:'#696969'}}>待结算</Text>
                </Left>
                <Right>
                  <Icon name="ios-arrow-forward" style={{ color: '#C7C7CC' }}/>
                </Right>
              </ListItem>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={()=>this.toAccountEnd()}>
              <ListItem style={{borderBottomWidth:0}}>
                <Left>
                  <Text style={{fontSize:getSize(17),color:'#696969'}}>已结算</Text>
                </Left>
                <Right>
                  <Icon name="ios-arrow-forward" style={{ color: '#C7C7CC' }}/>
                </Right>
              </ListItem>
            </TouchableWithoutFeedback>
          </List>
        </Content>
        <VFooter navigator={this.props.navigator}/>
      </View>
    )
  }
}
const styles = {
  aView: {
    flex: 1,
    alignItems: 'center',
    borderRightWidth: 1,
    borderRightColor: 'white'
  },
  aView1: {
    flex: 1,
    alignItems: 'center'
  },
  aView_Label: {
    color: 'white',
    fontSize: getSize(10),
    textAlign: 'center',
  },
  aView_Text: {
    color: 'white',
    fontSize: getSize(22),
    textAlign: 'center'
  }
}